<template>
  <div>
    <a-modal ref="modalRefs" :mask="false" :footer="null" :closable="false" width="338px" height="259px" v-model:open="showModalSetting" :bodyStyle="{padding:0}" :wrap-style="{margin:0, overflow: 'hidden',cursor: 'move' }" @ok="handleOk">
       <div class="pading20">
        <div class="">
        <div class="titles">配置导航栏</div>
           <a-input/>
           <div class="Rectangle371"></div>
        </div> 
        </div> 
      <template #modalRender="{ originVNode }">
        <div :style="transformStyle">
          <component :is="originVNode" />
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { ref, computed, CSSProperties, watch, watchEffect } from 'vue';
  import { useDraggable } from '@vueuse/core';
  import {useCommomStore} from "@/pinia/store/commom.pinia"
  import {storeToRefs} from 'pinia';  

  import m501 from "../../assets/img/m501.png"
  import m502 from "../../assets/img/m502.png"
  import m503 from "../../assets/img/m503.png"
const storeCommomStore = useCommomStore();
const {showModalSetting} =  toRefs(storeCommomStore)
  const modalTitleRef = ref < HTMLElement > (null);
  
  const { x, y, isDragging } = useDraggable(modalTitleRef);
  const handleOk = (e: MouseEvent) => {
    console.log(e);
   storeCommomStore.setShowModalSetting()
    
  };
  const startX = ref < number > (0);
  const startY = ref < number > (0);
  const startedDrag = ref(false);
  const transformX = ref(0);
  const transformY = ref(0);
  const preTransformX = ref(0);
  const preTransformY = ref(0);
  const dragRect = ref({ left: 0, right: 0, top: 0, bottom: 0 });
  watch([x, y], () => {
    if (!startedDrag.value) {
      startX.value = x.value;
      startY.value = y.value;
      const bodyRect = document.body.getBoundingClientRect();
      const titleRect = modalTitleRef.value.getBoundingClientRect();
      dragRect.value.right = bodyRect.width - titleRect.width;
      dragRect.value.bottom = bodyRect.height - titleRect.height;
      preTransformX.value = transformX.value;
      preTransformY.value = transformY.value;
    }
    startedDrag.value = true;
  });
  watch(isDragging, () => {
    if (!isDragging) {
      startedDrag.value = false;
    }
  });

  watchEffect(() => {
    if (startedDrag.value) {
      transformX.value =
        preTransformX.value +
        Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) -
        startX.value;
      transformY.value =
        preTransformY.value +
        Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) -
        startY.value;
    }
  });
  const transformStyle = computed < CSSProperties > (() => {
    return {
      transform: `translate(${transformX.value}px, ${transformY.value}px)`,
    };
  });

 
 
</script>
<style scoped lang="scss"> 
.mores{ 
  width: 526px; 
  height: 30px;
  background: rgba(249, 251, 255, 1);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
  padding:4px 0px 4px 20px;
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 14px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
}
 
.moresRight{
  display:flex;
  flex-direction:row;
  align-items:center;
  padding-right:20px;
  img{
    width:14px;
    height:14px;
    margin-left:10px;
    cursor:pointer;
  }
}

::v-deep(.ant-modal-content){ 
  padding:0!important;
  border-radius:0px;
}
 
::v-deep(.ant-table-thead >tr>td){
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-size: 12px;
}
::v-deep(.ant-table-tbody>tr>td){
      padding: 5px 16px!important;
}
.titles{
  height: 30px;
  background: rgba(230, 248, 250, 1);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
  padding:4px 0px 4px 13px;
}
.mtop30{
  margin-top:30px;
}

.Rectangle371 { 
  width: 313px;
  height: 113px;
  margin:0 auto;
  border-radius: 2px;
  border: 1px solid rgba(225, 225, 225, 1);
  box-sizing: border-box;
  background: rgba(255, 255, 255, 1);
}
</style>